<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>公信商城－购物车</title>

    <!--图标字体 http://fontawesome.io/icons/ -->
    <link rel="stylesheet" href="css/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/ui-base.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <script src="js/jquery.min.js"></script>
    <!--<script src="js/loaderMask.js"></script>-->
    <!--icheck组件-->
    <link href="js/icheck-1.x/skins/flat/blue.css" rel="stylesheet">
    <script src="js/icheck-1.x/icheck.min.js"></script>
</head>
<body>
    <header class="header">
        <span class="title">购物车</span>
        <a class="l-btn l-back" href="javascript: window.history.go(-1);"></a>
        <!--<span class="r-btn">清空</span>-->
    </header>
    <div class="content w100 ho">
        <div class="shop-cart ho">
            <div class="tt">
                <label class="f-l store-checkbox"><input type="checkbox" checked disabled></label>
                <span class="f-l ttt">王小二的旗舰店</span>
            </div>
            <div class="shopcart-list ho">
                <label class="f-l"><input type="checkbox" checked disabled></label>
                <div class="list-img ho f-l">
                    <img src="images/mainpage/goods-img02.jpg"/>
                </div>
                <div class="info ho f-l po-r">
                    <span class="title omission">手工制作楠木老漆龟甲勺手工制作楠木老漆龟甲勺</span>
                    <p><span>￥</span><span class="price">38.8</span>×<span class="num">1</span>
                    <div class="num-index ho">
                        <span class="less">-</span>
                        <input type="text" class="form-num" value="1" id="num_{$hot_goods.id}" maxlength="3" onkeyup="this.value=this.value.replace(/[^\d]/g, '')"  />
                        <span class="add">+</span>
                    </div>
                    <a class="del-btn" href="##"><img src="images/shoppingCard/del.png"/></a>
                </div>
            </div>
            <div class="shopcart-list ho">
                <label class="f-l"><input type="checkbox" checked disabled></label>
                <div class="list-img ho f-l">
                    <img src="images/mainpage/goods-img02.jpg"/>
                </div>
                <div class="info ho f-l po-r">
                    <span class="title omission">手工制作楠木老漆龟甲勺手工制作楠木老漆龟甲勺</span>
                    <p><span>￥</span><span class="price">28.8</span>×<span class="num">1</span>
                    <div class="num-index ho">
                        <span class="less">-</span>
                        <input type="text" class="form-num" value="1" id="num_{$hot_goods.id}" maxlength="3" onkeyup="this.value=this.value.replace(/[^\d]/g, '')"  />
                        <span class="add">+</span>
                    </div>
                    <a class="del-btn" href="##"><img src="images/shoppingCard/del.png"/></a>
                </div>
            </div>
        </div>

        <div class="shop-cart ho">
            <div class="tt">
                <label class="f-l store-checkbox"><input type="checkbox" checked disabled></label>
                <span class="f-l ttt">王小四的旗舰店</span>
            </div>
            <div class="shopcart-list ho">
                <label class="f-l"><input type="checkbox" checked disabled></label>
                <div class="list-img ho f-l">
                    <img src="images/mainpage/goods-img02.jpg"/>
                </div>
                <div class="info ho f-l po-r">
                    <span class="title omission">手工制作楠木老漆龟甲勺手工制作楠木老漆龟甲勺</span>
                    <p><span>￥</span><span class="price">18.8</span>×<span class="num">1</span>
                    <div class="num-index ho">
                        <span class="less">-</span>
                        <input type="text" class="form-num" value="1" id="num_{$hot_goods.id}" maxlength="3" onkeyup="this.value=this.value.replace(/[^\d]/g, '')"  />
                        <span class="add">+</span>
                    </div>
                    <a class="del-btn" href="##"><img src="images/shoppingCard/del.png"/></a>
                </div>
            </div>
            <div class="shopcart-list ho">
                <label class="f-l"><input type="checkbox" checked disabled></label>
                <div class="list-img ho f-l">
                    <img src="images/mainpage/goods-img02.jpg"/>
                </div>
                <div class="info ho f-l po-r">
                    <span class="title omission">手工制作楠木老漆龟甲勺手工制作楠木老漆龟甲勺</span>
                    <p><span>￥</span><span class="price">8.8</span>×<span class="num">1</span>
                    <div class="num-index ho">
                        <span class="less">-</span>
                        <input type="text" class="form-num" value="1" id="num_{$hot_goods.id}" maxlength="3" onkeyup="this.value=this.value.replace(/[^\d]/g, '')"  />
                        <span class="add">+</span>
                    </div>
                    <a class="del-btn" href="##"><img src="images/shoppingCard/del.png"/></a>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer-gwc">
        <span>共</span>
        <span class="num">1</span>
        <span>件</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span>合计￥</span>
        <span class="price">38.8</span>
        <a class="buy-confirm f-r" href="##">确认购买</a>
    </footer>
    <script>
        $(function () {
            /*初始件数及价格*/
            getNum();

            /*icheck组件*/
           $('input').iCheck({
                checkboxClass: 'icheckbox_flat-blue',
                radioClass: 'iradio_flat-blue'
            });
           /*
            $('.shop-cart .store-checkbox input').on('ifClicked', function(event){
                if (event.currentTarget.checked) {
                    $(this).parent().parent().parent().parent().find('input').iCheck('uncheck');
                } else {
                    $(this).parent().parent().parent().parent().find('input').iCheck('check');
                }
            });
            $('.shopcart-list input').on('ifClicked', function(event){
                $(this).parent().parent().parent().parent().find('.store-checkbox').find('input').iCheck('uncheck');
            });*/

            /*数量操作*/
            $('.less').on('click', function () {
                var num = parseInt($(this).parent().find('.form-num').val());
                if (num > 2) {
                    $(this).parent().find('.add').css('color', '#2d2d2d');
                    num--;
                }
                else if (num == 2) {
                    num--;
                    $(this).css('color', '#d2d2d2');
                }
                else {
                    $(this).css('color', '#d2d2d2');
                    return;
                }
                $(this).parent().find('.form-num').val(num);
                $(this).parent().parent().find('.num').html(num);
                getNum();
            });
            $('.add').on('click', function () {
                var num = parseInt($(this).parent().find('.form-num').val());
                if (num < 998) {
                    $(this).parent().find('.less').css('color', '#2d2d2d');
                    num++;
                }
                else if (num == 998) {
                    num++;
                    $(this).css('color', '#d2d2d2');
                }
                else {
                    $(this).css('color', '#d2d2d2');
                    return;
                }
                $(this).parent().find('.form-num').val(num);
                $(this).parent().parent().find('.num').html(num);
                getNum();
            });

            /*件数 总价计算*/
            function getNum () {
                var len = $('.shopcart-list').length;
                var num = 0;
                var price = 0;
                $.each( $('.shopcart-list'), function(i, n){
                    var pp = $(n).find('.price').html();
                    var nn = $(n).find('.num').html();
                    num += parseInt(nn);
                    price = parseFloat(price) + parseFloat(parseInt(nn) * parseFloat(pp));
                    price = parseFloat(price).toFixed(2);
                });
                $('.footer-gwc').find('.num').html(num);
                $('.footer-gwc').find('.price').html(price);
            }

        });
    </script>
</body>
</html>